<template>
	<view class="user margin-top-sm">
		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-wrap">
				<!-- 单元格 -->
				<view class="cell" @click="jumpToPage('/pages/order/order')">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">全部订单</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
				<!-- 订单状态 -->
				<view class="status-list" style="display: none;">
					<view class="status-item" hover-class="btn-hover" v-for="(item, index) in orderStatusList"
						:key="index" @click="jumpToPage(item.uri)">
						<view class="item-icon" :class="item.icon"></view>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" @click="jumpToPage('/pages/myOrder/myGroupProductOrder')">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">我的拼团</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
			<view class="cell" @click="jumpToPage('/pages/address/addressList')">
				<view class="cell-left">
					<image class="cell-icon" src="/static/images/user/icon-address.png" mode="aspectFill"></image>
					<view class="cell-text">收货地址</view>
				</view>
				<view class="iconfont iconmore1"></view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				orderStatusList: [{
						name: '待付款',
						icon: 'iconfont iconweibiaoti2fuzhi04',
						status: 10,
						"uri": "/pages/order/order?stat=1001"
					},
					{
						name: '待发货',
						icon: 'iconfont iconicon-test',
						status: 30,
						"uri": "/pages/order/order?stat=2002"
					},
					{
						name: '待收货',
						icon: 'iconfont icondaishouhuo',
						status: 40,
						"uri": "/pages/order/order?stat=3003"
					},
					{
						name: '待评价',
						icon: 'iconfont icondaipingjia',
						status: 50,
						"uri": "/pages/order/order?stat=4004"
					},
					{
						name: '全部',
						icon: 'iconfont iconquanbu-copy',
						status: 55,
						"uri": "/pages/order/order"
					}
				],
				orderServStatusList: [{
						name: '待下单',
						icon: 'iconfont iconjiaruwomen',
						status: 10,
						"uri": "/pages/homemaking/order?stat=1101"
					},
					{
						name: '待接单',
						icon: 'iconfont icondengdai',
						status: 30,
						"uri": "/pages/homemaking/order?stat=2102"
					},
					{
						name: '待上门',
						icon: 'iconfont icondaishouhuo',
						status: 40,
						"uri": "/pages/homemaking/order?stat=3103"
					},
					{
						name: '待支付',
						icon: 'iconfont iconiconfonttuige2',
						status: 50,
						"uri": "/pages/homemaking/order?stat=3104"
					},
					{
						name: '待评价',
						icon: 'iconfont iconshenqingtongguo',
						status: 55,
						"uri": "/pages/homemaking/order?stat=4004"
					},
					{
						name: '已完成',
						icon: 'iconfont iconquanbu-copy',
						status: 55,
						"uri": "/pages/homemaking/order?stat=8008"
					}
				],
				currentIndex: 0,
			};
		},
		methods: {
			tuiguang() {

			},
			jumpToPage: function(_pageUrl) {
				this.vc.navigateTo({
					url: _pageUrl
				})
			}
		},
	 async onLoad(options) {
		 await this.vc.onLoad(options);
			this.vc.loginAuth(options);
		},
		onShow() {}
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		.order-status {
			padding: 0 20rpx;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 80rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
</style>
